<template lang="html">
  <div class="address-add">
    <div class="main">
      <div class="group-form">
        <i class="form-icon">
          <img class="max" src="/static/modules/address/address_icon_name@2x.png" alt="">
        </i>
        <input type="text" placeholder="收件人姓名" v-model="forms.name">
      </div>
      <div class="group-form">
        <i class="form-icon">
          <img class="max" src="/static/modules/address/address_icon_phone@2x.png" alt="">
        </i>
        <input type="tel" placeholder="收件人手机" maxlength="11" v-model="forms.phone">
      </div>
      <div class="group-form">
        <i class="form-icon">
          <img class="max" src="/static/modules/address/address_icon_area@2x.png" alt="">
        </i>
        <Area ref="Area" classStyle="address" @getSelectAddress="getSelectAddress" :address="defaultAddress" placeholder="请选择所在地区" />
      </div>
      <div class="group-form">
        <i class="form-icon">
          <img class="max" src="/static/modules/address/address_icon_minute@2x.png" alt="">
        </i>
        <input type="text" placeholder="详细地址，街道、门牌号" v-model="forms.address">
      </div>
    </div>
    <div class="default-status" @click="setDefaultAddress">
      <span class="text">设为默认地址</span>
      <span class="icon">
        <img class="max" v-if="forms.isdefault" src="/static/modules/address/address_icon_pitchon@2x.png">
        <img class="max" v-else src="/static/modules/address/address_icon_unselected@2x.png">
      </span>
    </div>
    <div class="btn btn-default" @click="saveAddress">
      保存地址
    </div>
  </div>
</template>

<script>
import Area from '@/components/Area'
import { addAddress, editAddress } from '@/api/modules/address'
import { Toast  } from 'mint-ui';

export default {
  components: {
    Area,
  },
  data() {
    return {
      defaultAddress: [],
      forms: {
        name: null,
        phone: null,
        isdefault: false,
        address: null,
      },
      seqid: this.getUrlParams('seqid'),
    }
  },
  created() {
    // 编辑地址
    if(this.seqid){
      let editAddress = this.getlocalStorage('editAddress');
      this.forms.name = editAddress.name;
      this.forms.phone = editAddress.phone;
      this.forms.address = editAddress.address;
      this.forms.isdefault = editAddress.isdefault == '1'?true:false;
      this.defaultAddress = [editAddress.province, editAddress.city, editAddress.quxian]
    }
  },
  methods: {
    // 设置默认地址
    setDefaultAddress() {
      this.forms.isdefault = !this.forms.isdefault;
    },
    // 点击保存、新建地址
    saveAddress() {
      if(!this.forms.name){
        Toast('请输入姓名')
      }else if (!this.forms.phone) {
        Toast('请输入联系手机号')
      }else if (this.forms.phone.length < 11) {
        Toast('手机号格式错误')
      }else if (!this.forms.address) {
        Toast('请输入详细地址')
      }else{
        // 编辑
        if(this.seqid){
          this.editAddress()
        // 新增
        }else{
          this.addAddress();
        }

      }
    },
    // 新增
    addAddress() {
      addAddress({
        name: this.forms.name,
        phone: this.forms.phone,
        province: this.defaultAddress[0],
        city: this.defaultAddress[1],
        quxian: this.defaultAddress[2],
        address: this.forms.address,
        isdefault: this.forms.isdefault ? "1" : "0",
        username: this.getUserInfo().username
      }).then(res=>{

        if(res.code == 0){
          Toast('添加成功')
          setTimeout(()=>{
            this.$router.push('/modules/address')
          }, 500)
        }else{
          Toast(res.mag)
        }
      })
    },
    // 编辑
    editAddress() {
      editAddress({
        id: this.seqid,
        name: this.forms.name,
        phone: this.forms.phone,
        province: this.defaultAddress[0],
        city: this.defaultAddress[1],
        quxian: this.defaultAddress[2],
        address: this.forms.address,
        isdefault: this.forms.isdefault ? "1" : "0",
        username: this.getUserInfo().username
      }).then(res=>{
        if(res.code == 0){
          Toast('保存成功')
          setTimeout(()=>{
            this.$router.push('/modules/address')
          }, 500)
        }else{
          Toast(res.mag)
        }
      })
    },
    // 获取重选的地址
    getSelectAddress(val) {
      this.defaultAddress = val.split('-');
    }
  }
}
</script>

<style lang="scss" scoped>
.address-add{
  .main{
    background-color: #fff;
    margin: .4rem;
    padding: .4rem;
    border-radius: .14rem;
  }
  .group-form{
    margin-bottom: .2rem;
    position: relative;
    .form-icon{
      width: .614rem;
      display: inline-block;
    }
    input{
      border-bottom: 1px solid #f7f7f7;
      width: 6.9rem;
      line-height: 1rem;
      margin-left: .3rem;
    }
  }
}
.btn{
  width: 8.5rem;
  margin: 0 auto;
  border-radius: 10rem;
  line-height: 1.3rem;
  font-size: .426rem;
  margin-top: 1rem;
  text-align: center;
}
.btn-default{
  background-color: #36A5F8;
  color: #fff;
}
.default-status{
  overflow: hidden;
  background-color: #fff;
  margin: .4rem;
  padding: .4rem;
  border-radius: .14rem;
  .text{
    float: left;
    color: #4A4A4A;
  }
  .icon{
    float: right;
    width: .6rem;
    display: inline-block;
  }
}
</style>
